import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Modal, Select, Input } from 'antd';

import request from '@/utils/request';
const { Option } = Select;
const { info } = Modal;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

function FlowLimitTimeCfg(props) {
  const { getFieldDecorator } = props.form;
  const [timeUnitList, setTimeUnitList] = useState([]); // 时间单位

  // 初始化数据
  useEffect(() => {
    initData();
  }, [props.selectRecord]);

  const initData = () => {
    const tempTimeUnitList = [
      {
        name: '分钟',
        value: 'M',
      },
      {
        name: '时',
        value: 'H',
      },
      {
        name: '天',
        value: 'D',
      },
    ];
    setTimeUnitList(tempTimeUnitList);

    if (!isEmptyObject(props.selectRecord)) {
      props.form.setFieldsValue({
        limitValue: props.selectRecord.limitValue,
        alertValue: props.selectRecord.alertValue,
        timeUnit: props.selectRecord.timeUnit,
      });
    }
  };

  const handleOk = async () => {
    console.log(props);
    try {
      await props.form.validateFields();
    } catch (error) {
      info({ title: '请确认', content: '请确认必填字段已填写！' });
      return;
    }

    const formData = props.form.getFieldsValue();
    const submitData = Object.assign(
      {
        flowId: props.selectRecord.flowId,
      },
      formData
    );

    let isSuccess;
    request('pmc/pms/pmOrderFlowDef/updateTimeLimit', {
      data: submitData,
    }).then(res => {
      if (res.success && res.success === true) {
        props.handleLimitTimeVisible(false);
        props.handleLimitTimeCallBack();
        isSuccess = true;
      } else {
        info({ title: '提交失败', content: res.errMessage });
        isSuccess = false;
      }
    });
    return isSuccess;
  };

  // 通过‘x’关闭弹窗
  const handleCancel = () => {
    const { handleLimitTimeVisible } = props;
    handleLimitTimeVisible(false);
  };

  return (
    <Modal
      title="设置流程时限"
      visible={props.modalVisible}
      width="60%"
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Col span={20}>
            <FormItem label="完成时限值" {...formItemLayout}>
              {getFieldDecorator('limitValue')(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={20}>
            <FormItem label="告警时限值" {...formItemLayout}>
              {getFieldDecorator('alertValue')(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={20}>
            <FormItem label="时间单位" {...formItemLayout}>
              {getFieldDecorator('timeUnit')(
                <Select
                  placeholder="请选择时间单位"
                  style={{ width: '100%' }}
                  showSearch
                  allowClear={true}
                >
                  {timeUnitList.length
                    ? timeUnitList.map(item => {
                        return (
                          <Option value={item.value} key={item.value}>
                            {item.name}
                          </Option>
                        );
                      })
                    : null}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default connect(() => ({}))(Form.create()(FlowLimitTimeCfg));
